<template>
	<view>
		<radio-group class="rc-pay-radio" @change="radioChange">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in typeList" :key="index">
				<view class="between" style="margin-bottom: 30rpx;">
					<view class="flex" style="align-items: center;">
						<image class="img" :src="item.img"></image>
						<view class="way-txt">{{item.name}}</view>
					</view>
					<radio color="#F40E0E" :value="item.value" :checked="index === current" />
				</view>

			</label>
		</radio-group>
	</view>
</template>

<script>
	export default {
		name: "m-pay-radio",
		data() {
			return {
				items: [{
						value: '202',
						name: '支付宝',
						checked: 'true',
						img: 'https://wx.2024csnl.com/static/mine/zhifubao.png'
					},
					{
						value: '201',
						name: '微信支付',
						img: 'https://wx.2024csnl.com/static/mine/weixin.png'
					},
					{
						value: '203',
						name: '云闪付',
						img: 'https://wx.2024csnl.com/static/mine/unionpay.png'
					},
					{
						value: '204',
						name: '云闪付APP',
						img: 'https://wx.2024csnl.com/static/mine/unionpay.png'
					},
					{
						value: '3',
						name: '支付宝',
						checked: 'true',
						img: 'https://wx.2024csnl.com/static/mine/zhifubao.png'
					},
					{
						value: '2',
						name: '微信支付',
						img: 'https://wx.2024csnl.com/static/mine/weixin.png'
					},
					{
						value: '1',
						name: '余额支付',
						checked: 'true',
						img: 'https://wx.2024csnl.com/static/mine/balance.png'
					},
					{
						value: '100',
						name: '泌豆支付',
						checked: 'true',
						img: 'https://wx.2024csnl.com/static/mine/score.png'
					},
					{
						value: '200',
						name: '泌豆+余额支付',
						checked: 'true',
						img: 'https://wx.2024csnl.com/static/mine/packagepay.png'
					},
				],
				current: 0,
				selectPayType: '1'
			};
		},
		props: {
			payList: {
				type: Array,
				default: () => {
					return [3, 2, 1, 4]
				}
			}
		},
		computed: {
			typeList() {
				let list = []
				if (this.payList.length != 0) {
					this.payList.forEach((num) => {
						this.items.forEach(item => {
							if (num == item.value) {
								list.push(item)
							}
						})
					})
				}
				return list
			}
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				this.selectPayType = evt.detail.value
				this.$emit('payType', this.selectPayType)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 60rpx;
		height: 60rpx;
	}

	.rc-pay-radio {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 29rpx 27rpx;
		box-sizing: border-box;


		.way-txt {
			margin-left: 56rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>